<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 侯瑜
 * @LastEditTime: 2022-01-10 19:48:10
-->
<template>
  <div ref="Bottom4_container"  style="height: 95%"></div>
</template>
<script>

  import { Column, G2 } from '@antv/g2plot';
export default{
  data(){
    return{
      dataArr:[
            {
              "year": "2013",
              "type": "不带",
              "value": 92.1,
            },
            {
              "year": "2013",
              "type": "只带不玩",
              "value": 145.1,
            },
            {
              "year": "2013",
              "type": "带也玩",
              "value": 110.6,
            },
               ]
    }
  
  },
  created(){

  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){

      
      const columnPlot = new Column(this.$refs.Bottom4_container , {
            data:this.dataArr,
            xField: 'year',
            yField: 'value',
            seriesField: 'type',
            isPercent: true,
            isStack: true,
            meta: {
        value: {
          min: 0,
          max: 1,
        },
      },
      label: {
        position: 'middle',
        content: (item) => {
          return `${(item.value * 100).toFixed(2)}%`;
        },
        style: {
          fill: '#fff',
        },
      },
      tooltip: false,
      interactions: [{ type: 'element-highlight-by-color' }, { type: 'element-link' }],
    });

      columnPlot.render();
    }
  }

}
</script>
<style scoped>

</style>